<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="basePath" scope="session" value="${pageContext.request.contextPath}"></c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class="panel-fit">
 <head> 
  <title>角色集合</title> 
  <script type="text/javascript" src="${basePath}/resources/mutiLang/zh-cn.js"></script>
  <script type="text/javascript" src="${basePath}/resources/js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="${basePath}/resources/js/jquery.cookie.js"></script>
  <script type="text/javascript" src="${basePath}/resources/js/jquery.storageapi.min.js"></script>
  <script type="text/javascript" src="${basePath}/resources/tools/dataformat.js"></script>
  <link id="easyuiTheme" rel="stylesheet" href="${basePath}/resources/esayUI/1.3.2/themes/metro/easyui.css" type="text/css" />
  <link id="easyuiTheme" rel="stylesheet" href="${basePath}/resources/esayUI/1.3.2/themes/metro/main.css" type="text/css" />
  <link rel="stylesheet" href="${basePath}/resources/esayUI/1.3.2/themes/icon.css" type="text/css" />
  <link rel="stylesheet" type="text/css" href="${basePath}/resources/accordion/css/accordion.css" />
  <script type="text/javascript" src="${basePath}/resources/esayUI/1.3.2/jquery.easyui.min.1.3.2.js"></script>
  <script type="text/javascript" src="${basePath}/resources/esayUI/1.3.2/locale/zh-cn.js"></script>
  <script type="text/javascript" src="${basePath}/resources/tools/syUtil.js"></script>
  <script type="text/javascript" src="${basePath}/resources/esayUI/1.3.2/extends/datagrid-scrollview.js"></script>
  <link rel="stylesheet" href="${basePath}/resources/tools/css/metro/common.css" type="text/css" />
  <script type="text/javascript" src="${basePath}/resources/lhgDialog/lhgdialog.min.js?skin=metro"></script>
  <script type="text/javascript" src="${basePath}/resources/tools/curdtools_zh-cn.js"></script>
  <script type="text/javascript" src="${basePath}/resources/tools/easyuiextend.js"></script>
  <script type="text/javascript" src="${basePath}/resources/hftable/jquery-hftable.js"></script>
  <script type="text/javascript" src="${basePath}/resources/tools/json2.js"></script> 
</head> 
 <body style="overflow-y: hidden" scroll="no" class="panel-noscroll"> 
<script type = "text/javascript" > $(function() {
    storage = $.localStorage;
    if (!storage) storage = $.cookieStorage;
    //var _datasDatagrid = $('#roleList');
   /*	$('#roleList').datagrid({
		url : 'list',
		title:'角色选择',
		fit : true,
		autoRowHeight : false,
		striped : true,
		rownumbers : true,
		pagination : true,
		singleSelect : false,
		fitColumns : true,
		pageSize : 10,
		pageList : [10,20,30,40,50],
		nowrap : true,
		border : false,
		loadMsg: '数据加载中...',
		idField : 'id',
		sortName : 'id',
		sortOrder : 'desc',
        emptyMsg: '没有查询到相关数据',
		frozenColumns: [[
		     				{field:'ck',title:'编号',align:'center',width:100,sortable:true,checkbox:true},
					   ]],
		columns:[[
					{field:'name',title:'角色名',align:'left',width:300,sortable:true}								
		
				]],
		onLoadSuccess : function(data) {
		},
		onDblClickRow : function(rowIndex, rowData) {
		},
		onRowContextMenu : function(e, rowIndex, rowData){
			e.preventDefault();
			_datasDatagrid.datagrid('unselectAll').datagrid('selectRow', rowIndex);
		},
		onAfterEdit : function(rowIndex, rowData, changes) { 
		}
	});*/
    
    
    
    
    
    
    
  $('#roleList').datagrid({
        url : 'list',
		title:'角色选择',
		fit : true,
		autoRowHeight : false,
		striped : true,
		rownumbers : true,
		pagination : true,
		singleSelect : false,
		fitColumns : true,
		pageList : [4,8],
		nowrap : true,
		border : false,
		loadMsg: '数据加载中...',
		idField : 'id',
		sortName : 'id',
		sortOrder : 'desc',
        emptyMsg: '没有查询到相关数据',
        showFooter: true,
        frozenColumns: [[{
            field: 'ck',
            checkbox: 'true'
        },
        ]],
        columns: [[{
            field: 'id',
            title: '编号',
            hidden: true,
            sortable: true
        },
        {
            field: 'name',
            title: '角色名称',
            width: 50,
            sortable: true
        }]],
        onLoadSuccess: function(data) {
            $("#roleList").datagrid("clearSelections");
            initCheck(data);
        },
        onClickRow: function(rowIndex, rowData) {
            rowid = rowData.id;
            gridname = 'roleList';
        }
    });
    $('#roleList').datagrid('getPager').pagination({
        beforePageText: '',
        afterPageText: '/{pages}',
        displayMsg: '{from}-{to}共 {total}条',
        showPageList: true,
        showRefresh: false
    });
    $('#roleList').datagrid('getPager').pagination({
        onBeforeRefresh: function(pageNumber, pageSize) {
            $(this).pagination('loading');
            $(this).pagination('loaded');
        }
    });
    try {
        restoreheader();
    } catch(ex) {}
});
function reloadTable() {
    try {
        $('#' + gridname).datagrid('reload');
        $('#' + gridname).treegrid('reload');
    } catch(ex) {}
}
function reloadroleList() {
    $('#roleList').datagrid('reload');
}
function getroleListSelected(field) {
    return getSelected(field);
}
function getSelected(field) {
    var row = $('#' + gridname).datagrid('getSelected');
    if (row != null) {
        value = row[field];
    } else {
        value = '';
    }
    return value;
}
function getroleListSelections(field) {
    var ids = [];
    var rows = $('#roleList').datagrid('getSelections');
    for (var i = 0; i < rows.length; i++) {
        ids.push(rows[i][field]);
    }
    ids.join(',');
    return ids
};
function getSelectRows() {
    return $('#roleList').datagrid('getChecked');
}
function saveHeader() {
    var columnsFields = null;
    var easyextends = false;
    try {
        columnsFields = $('#roleList').datagrid('getColumns');
        easyextends = true;
    } catch(e) {
        columnsFields = $('#roleList').datagrid('getColumnFields');
    }
    var cols = storage.get('roleListhiddenColumns');
    var init = true;
    if (cols) {
        init = false;
    }
    var hiddencolumns = [];
    for (var i = 0; i < columnsFields.length; i++) {
        if (easyextends) {
            hiddencolumns.push({
                field: columnsFields[i].field,
                hidden: columnsFields[i].hidden
            });
        } else {
            var columsDetail = $('#roleList').datagrid("getColumnOption", columnsFields[i]);
            if (init) {
                hiddencolumns.push({
                    field: columsDetail.field,
                    hidden: columsDetail.hidden,
                    visible: (columsDetail.hidden == true ? false: true)
                });
            } else {
                for (var j = 0; j < cols.length; j++) {
                    if (cols[j].field == columsDetail.field) {
                        hiddencolumns.push({
                            field: columsDetail.field,
                            hidden: columsDetail.hidden,
                            visible: cols[j].visible
                        });
                    }
                }
            }
        }
    }
    storage.set('roleListhiddenColumns', JSON.stringify(hiddencolumns));
}
function restoreheader() {
    var cols = storage.get('roleListhiddenColumns');
    if (!cols) return;
    for (var i = 0; i < cols.length; i++) {
        try {
            if (cols.visible != false) $('#roleList').datagrid((cols[i].hidden == true ? 'hideColumn': 'showColumn'), cols[i].field);
        } catch(e) {}
    }
}
function resetheader() {
    var cols = storage.get('roleListhiddenColumns');
    if (!cols) return;
    for (var i = 0; i < cols.length; i++) {
        try {
            $('#roleList').datagrid((cols.visible == false ? 'hideColumn': 'showColumn'), cols[i].field);
        } catch(e) {}
    }
}
function roleListsearch() {
    var queryParams = $('#roleList').datagrid('options').queryParams;
    $('#roleListtb').find('*').each(function() {
        queryParams[$(this).attr('name')] = $(this).val();
    });
    $('#roleList').datagrid({
        url: 'userController.do?datagridRole&field=id,roleName,',
        pageNumber: 1
    });
}
function dosearch(params) {
    var jsonparams = $.parseJSON(params);
    $('#roleList').datagrid({
        url: 'userController.do?datagridRole&field=id,roleName,',
        queryParams: jsonparams
    });
}
function roleListsearchbox(value, name) {
    var queryParams = $('#roleList').datagrid('options').queryParams;
    queryParams[name] = value;
    queryParams.searchfield = name;
    $('#roleList').datagrid('reload');
}
$('#roleListsearchbox').searchbox({
    searcher: function(value, name) {
        roleListsearchbox(value, name);
    },
    menu: '#roleListmm',
    prompt: '请输入查询关键字'
});
function EnterPress(e) {
    var e = e || window.event;
    if (e.keyCode == 13) {
        roleListsearch();
    }
}
function searchReset(name) {
    $("#" + name + "tb").find(":input").val("");
    roleListsearch();
} </script>
  <div class="panel datagrid" style="width: 400px;">
   <div class="datagrid-wrap panel-body" title="" style="width: 398px; height: 324px;">
    <div id="roleListtb" style="padding:3px; height: auto" class="datagrid-toolbar">
     <div name="searchColums">
      <input id="_sqlbuilder" name="sqlbuilder" type="hidden" />
      <span style="display:-moz-inline-box;display:inline-block;"><span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 80px;text-align:right;text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: hidden;white-space:nowrap; " title="角色名称">角色名称：</span><input onkeypress="EnterPress(event)" onkeydown="EnterPress()" type="text" name="roleName" class="inuptxt" style="width: 100px" /></span>
     </div>
     <div style="height:30px;" class="datagrid-toolbar">
      <span style="float:left;"></span>
      <span style="float:right"><a href="#" class="easyui-linkbutton l-btn" iconcls="icon-search" onclick="roleListsearch()" id="">查询</a><a href="#" class="easyui-linkbutton l-btn" iconcls="icon-reload" onclick="searchReset('roleList')" id="">重置</a></span>
     </div> 
    </div>
    <div class="datagrid-view" style="width: 398px; height: 320px;">
     <table width="100%" id="roleList" toolbar="#roleListtb" style="display: none;"></table>
    </div>
   </div>
  </div>
 </body>
 <script type="text/javascript">
function initCheck(data){
	var ids = "${ids}";
	var idArr = ids.split(",");
	for(var i=0;i<idArr.length;i++){
		if(idArr[i]!=""){
			$("#roleList").datagrid("selectRecord",idArr[i]);
		}
	}
} 
</script>
</html>
